@import "src/styles/utils.less";
@import "src/styles/colors.less";
@import "src/styles/btn/index.less";

.ls-search {
  height: 2em;
  padding: 0 30rpx;

  transition: all ease-in-out 500ms;
  &_active {
    position: fixed;
    z-index: 1024;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    height: 100vh;
    padding: 0;

    transition: height ease-in-out 500ms;

    background: @white;
  }
  &__wrapper {
    border-radius: 2em;
    background: @background;
    &_active {
      width: 690rpx;
      margin: 0 auto;

      background: @white;
    }
  }
  &__input {
    width: 100%;
    &-placeholder {
      color: @secondary-text;
      background: data("images/search.png") left no-repeat;
      background-size: 14px;

      .font-size_px(14px);
      &:before {
        display: inline-block;

        width: 20px;

        content: "";
      }
    }
  }
  &__history {
    height: 100%;

    background: @background;
  }
}
